<route lang="json5">
{
  style: {
    navigationBarTitleText: '添加账单',
  },
}
</route>
<template>
  <view class="bill-page">
    <view class="bill-page__head mt-1">
      <wd-segmented
        :value="tab"
        :options="map(allBillConfig, 'name')"
        @change="tabChanged"
      ></wd-segmented>
    </view>
    <view class="mt-2">
      <wd-tabs v-model:model-value="tab" custom-class="bill-page__content">
        <block v-for="config in allBillConfig" :key="config.name">
          <wd-tab :name="config.name">
            <view class="category_content">
              <wd-card>
                <template #title>
                  <view class="title" style="font-size: 13px; color: #666">
                    <view>交易金额</view>
                  </view>
                </template>

                <wd-input
                  :model-value="formData.amount"
                  label="￥"
                  size="large"
                  placeholder="0.00"
                  custom-class="bill-page__amount"
                  @focus="onAmountFocus"
                />
              </wd-card>

              <block
                v-for="(configContent, configContentKey) in config.contents"
                :key="`${configContent.name}_${configContentKey}`"
              >
                <wd-card>
                  <template #title>
                    <view class="title" style="font-size: 13px; color: #666">
                      <view>{{ configContent.name }}{{ configContentKey }}</view>
                    </view>
                  </template>

                  <CsTagList
                    :category-list="configContent.data"
                    :select-category-id="formData.config[configContentKey]?.mainSubcategory"
                    :select-sub-category-id="formData.config[configContentKey]?.subCategory"
                    @click="
                      (categoryItem, type) => categoryClick(categoryItem, type, configContentKey)
                    "
                  />
                </wd-card>
              </block>
            </view>
          </wd-tab>
        </block>
      </wd-tabs>
    </view>
    <wd-number-keyboard
      v-model:visible="showAmountKeyboard"
      mode="custom"
      extra-key="."
      close-text="完成"
      @input="onAmountInput"
      @delete="onAmountDelete"
    ></wd-number-keyboard>
  </view>
</template>

<script lang="ts" setup>
import { isEmpty, isNil, map } from 'lodash'
import { CsGridItem } from '@/components/cs-btn-grid/cs-btn-grid.types'
import CsTagList from '@/components/cs-tag-list/cs-tag-list.vue'

defineOptions({
  name: 'AddBill',
  options: {
    addGlobalClass: true,
    // virtualHost: true,// page con't use this
    styleIsolation: 'shared',
  },
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const allBillConfig = ref<
  {
    name: string
    contents: Record<string, { name: string; data: CsGridItem[] }>
  }[]
>([
  {
    name: '支出',
    contents: {
      category: {
        name: '分类',
        data: [
          {
            title: '餐饮',
            icon: 'eat-west',
            iconPrefix: 'tn-icon',
            id: 'test',
            // size: '22',
            children: [
              {
                id: 'test1',
                title: '火锅',
                icon: 'eat-west',
                iconPrefix: 'tn-icon',
              },
            ],
          },
          {
            id: 'test2',
            title: '交通',
            icon: 'taxi',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test3',
            title: '购物',
            icon: 'paperbag',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test4',
            title: '住宿',
            icon: 'bed',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test5',
            title: '日常',
            icon: 'bed',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test6',
            title: '日常',
            icon: 'bed',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test7',
            title: '日常',
            icon: 'bed',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test8',
            title: '日常',
            icon: 'bed',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test9',
            title: '日常',
            icon: 'bed',
            iconPrefix: 'tn-icon',
            // children: []
          },
          {
            id: 'test11',
            title: '日常',
            icon: 'bed',
            iconPrefix: 'tn-icon',
            // children: []
          },
        ],
      },
      account: {
        name: '账户',
        data: [
          {
            id: '',
            title: '支付宝',
            icon: 'payment-alipay',
            iconPrefix: 'tn-icon',
          },
        ],
      },
    },
  },
  {
    name: '收入',
    contents: {
      category: {
        name: '分类',
        data: [
          {
            id: 'test22',
            title: '工资',
            icon: 'money',
            iconPrefix: 'tn-icon',
          },
        ],
      },
    },
  },
])

const showAmountKeyboard = ref<boolean>(false)

const tab = ref<string>(allBillConfig.value[0].name)

const formData = ref<{
  config: Record<string, { mainSubcategory?: string; subCategory?: string }>
  amount?: string
}>({
  config: { category: { mainSubcategory: allBillConfig.value[0].contents.category.data[0].id } }, // maybe not need default value here
})

const subCategoryActionSheet = ref<{
  show: boolean
  items?: CsGridItem[]
}>({ show: false })

const tabChanged = (params) => {
  console.log('params', params)

  tab.value = params.value
}

function categoryClick(
  categoryItem: CsGridItem,
  type: 'category' | 'subCategory',
  configContentKey: string,
) {
  if (isEmpty(formData.value.config[configContentKey])) {
    formData.value.config[configContentKey] = {}
  }
  switch (type) {
    case 'category':
      formData.value.config[configContentKey].mainSubcategory = categoryItem.id
      break
    case 'subCategory':
      subCategoryClick(categoryItem, configContentKey)
      break
  }
}

const subCategoryClick = (categoryItem: CsGridItem, configContentKey: string) => {
  if (formData.value.config[configContentKey].subCategory === categoryItem.id) {
    formData.value.config[configContentKey].subCategory = null
  } else {
    formData.value.config[configContentKey].subCategory = categoryItem.id
  }
}

function onAmountFocus(e) {
  showAmountKeyboard.value = true
}

function onAmountInput(value) {
  const acceptedRegex = /^\d{0,9}(\.\d{0,4})?/i
  const newAmount =
    isNil(formData.value.amount) || isEmpty(`${formData.value.amount}`)
      ? value
      : `${formData.value.amount}${value}`

  if (acceptedRegex.test(newAmount)) {
    formData.value.amount = acceptedRegex.exec(newAmount)[0]
  }
}

function onAmountDelete() {
  formData.value.amount = isEmpty(`${formData.value.amount}`)
    ? ''
    : formData.value.amount.slice(0, -1)
}
</script>

<style lang="scss" scoped>
.category_content {
  // text-align: center;
}

.bill-page__head {
  // margin: 0 0.5rem;
}
</style>

<style lang="scss">
.bill-page__content.wd-tabs {
  background-color: transparent !important;
}

.bill-page__content .wd-tabs__nav {
  display: none;
}

.bill-page__amount .wd-input__label {
  width: auto !important;

  & .wd-input__label-inner {
    font-size: 1.9rem !important;
  }
}

.bill-page__amount .wd-input__body {
  & .wd-input__inner {
    font-size: 1.9rem !important;
    caret-color: transparent !important;
  }
}

.is-full .wd-divider__content {
  display: none;
}
</style>

<style lang="scss">
@import '../../style/variable';
.black-with-root {
  background: $cs-root-page-background;
}
</style>
